<template>
  <div class="list">
    <pannle title="商品分类">
      <template #btn>
          <!-- 弹窗窗口 -->
   <el-button type="primary" @click="dialogFormVisible = true">添加分类</el-button>
   <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
    <el-form :model="fromData">
    <el-form-item label="分类名称" :label-width="formLabelWidth">
      <el-input v-model="fromData.cateName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="是否启用" :label-width="formLabelWidth">
       <el-switch
    v-model="fromData.state"
    active-color="#13ce66"
    inactive-color="#cccc"
    :active-value="1"
    :inactive-value="0">
  </el-switch>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addBtn()">确 定</el-button>
  </div>
</el-dialog>



      </template>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="cateName" label="分类名">
             <template slot-scope="scope">
              <!-- 假如flag===false显示静态文本-->
              <span v-if="!scope.row.flag">{{scope.row.cateName }}</span>
              <el-input v-else type="text" v-model="scope.row.cateName" size="mini">
              </el-input>
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch 
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#cccc"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <!-- 如果flag ====ture的时候 显示完成按钮  否则显示编辑按钮 -->
            <el-button size="mini" v-if="!scope.row.flag" @click="scope.row.flag = true">
              编辑
            </el-button>
            <el-button v-else type="success" size="mini" @click="AllBtn(scope.row)">
              完成
            </el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器属性 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </pannle>
  </div>
</template>

<script>
import Pannle from "@/components/Pannle.vue";
import { cateList,editList,addList } from "../../api/goods";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      fromData:{
          cateName:'',
          state:0
      }
        
    };
  },
  components: {
    Pannle,
  },
  methods: {
    //   当前的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getCateList();
    },
    //   当前的页面改变
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getCateList();
    },
    //请求分类的列表数据
    async getCateList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
    //   请求商品分类数据
      let  res  = await cateList(data);
      this.total = res.data.total;
      let all = res.data.data;
      this.tableData = all.map(item => {
        item.flag = false;
        return item;
      })
    },
    // 点击完成按钮
    async AllBtn (data) {
      //接口请求 修改数据
      let res = await editList(data);
      console.log(res);
      data.flag = false;
    },
    //弹窗的窗口提示
   async addBtn(){
        let res = await addList(this.fromData)
        console.log(res);
       if(res.data.code===0){
           this.dialogFormVisible='';
       this.dialogFormVisible=false

       }
    }
  },
  created() {
    //请求分类列表
    this.getCateList()
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
}
.el-input{
    width: 15rem;
    border: 1px solid black;
    
}
</style>